<template>
    <div class="tabbar">
        <div @click="btncLick(index)" :class="{active:btncLickcontent==index}" class="btn" v-for="(item,index) in btnArr" :key="index">
            <img :src="item.pic" alt="">
            <div>{{item.name}}</div>
        </div>
    </div>
</template>

<script>
let pic="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F202111%2F10%2F20211110082815_526b2.thumb.1000_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668255285&t=edbe92a33ce858f8a1dfa0d223087ae9"
export default {
    data(){
        return {
            btncLickcontent:0,
             btnArr:[
                {pic,name:'首页'},
                {pic,name:'订单'},
                {pic,name:'我的'},
             ]
        }
    },
    methods:{
        btncLick(index){
            this.btncLickcontent=index;//保存当前点击按钮的下标
        }
    }

}
</script>

<style lang="scss" scoped>
.tabbar{
    width: 100%;
    height: 60px;
    display: flex;
    justify-content: space-around;
    text-align: center;
    border-top: 1px solid #999;
    align-items: center;
    position: fixed;
    bottom: 0;
}
.tabbar img{
    width: 20px;
}
.active{
    color: rgb(31, 254, 161);

}

</style>